<script setup lang="ts">
import CdlTable from "@/components/table";
import CdlSearch from "@/components/search";
import {useTablePagingTemplate} from "@/hooks/TableHooks";
import {useRouter} from "vue-router";
import {reactive} from "vue";
import {Query, State} from "@/interfaces/components/Page";
import {Driver} from "@/interfaces/views/vehicle/driver";
import {FormTree} from "@/interfaces/components/Form";
import {TableTree} from "@/interfaces/components/Table";
import {useResetPasswordApi} from "@/api/vehicle/driver";
import {ElMessage} from "element-plus/es";
import {ElMessageBox} from "element-plus";

const router = useRouter()
const request = {
  createdIsNeed: true,
  url: "/slag-truck/driver",
}
const state = reactive<State<Query<Driver>, Driver>>({
  queryForm: {
    name: "",
    fleetId: undefined,
    status: undefined
  },
  dataList: []
})
const searTree: FormTree<Driver> = [
    [
      {label: "司机姓名", component: "input", prop: "name"},
      {label: "所属车队", component: "select", prop: "fleetId"},
      {label: "认证状态", component: "select", prop: "status", options: [
          {label: "未认证", value: 1},
          {label: "已认证", value: 2},
          {label: "申请中", value: 3},
        ]},
    ]
]
const tree: TableTree<Driver> = {
  colRule: [
    {ti: "司机姓名", prop: "name"},
    {ti: "司机手机号", prop: "mobile"},
    {ti: "身份证号码", prop: "idNum", width: 170},
    {ti: "司机状态", prop: "status", dict: "driver_status"},
    {ti: "关联车辆", prop: "licensePlate"},
    {ti: "所属车队", prop: "fleetName"},
    {ti: "信用评分", prop: "score"},
    {ti: "备注", prop: "remark"},
  ],
  control: [
    {name: "详情", type: "info", prop: "id", method: jumpDriverDetail, auth: "vehicle:driver:info"},
    {name: "查看评价", type: "info", method: ()=>{}, auth: "vehicle:driver:info"},
    {name: "修改", type: "success", prop: "id", method: jumpDriverUpdate, auth: "vehicle:driver:update"},
    {name: "重置密码", type: "danger", prop: "id", method: resetPassword, auth: "vehicle:driver:update"},
  ]
}
const {query, handleCurrentChange, handleSizeChange, loading} = useTablePagingTemplate(request, state)

/**
 * 跳转司机新增
 */
function jumpDriverInsert(){
  router.push({
    path: "/vehicleManage/driver/driverList/createAndModifyDriver"
  })
}

/**
 * 跳转司机修改
 * @param id
 */
function jumpDriverUpdate(id: string){
  router.push({
    path: "/vehicleManage/driver/driverList/createAndModifyDriver",
    query: {
      id: id
    }
  })
}
function resetPassword(id: string){
  ElMessageBox.confirm(
      '确定要将该司机的密码重置为手机号后四位吗?',
      '警告',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  ).then(() => {
        useResetPasswordApi(id).then(()=>{
          ElMessage.success("重置密码成功！")
        })
      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: '已取消',
        })
      })

}

/**
 * 跳转司机详情
 */
function jumpDriverDetail(id: number | string){
  router.push({
    path: "/vehicleManage/driver/driverList/driverDetails",
    query: {
      id: id
    }
  })
}
</script>

<template>
  <el-card>
    <CdlSearch :model="state.queryForm" :template-tree="searTree">
      <template #menu>
        <el-button type="warning" v-auth="'vehicle:driver:export'">导出</el-button>
        <el-button type="primary" @click="jumpDriverInsert" v-auth="'vehicle:driver:save'">新增</el-button>
      </template>
    </CdlSearch>
    <CdlTable :template-tree="tree" :data="state.dataList" :control-width="360" :loading="loading"></CdlTable>
    <el-pagination
        :current-page="state.page"
        :page-sizes="state.pageSizes!"
        :page-size="state.limit"
        :total="state.total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    >
    </el-pagination>
  </el-card>
</template>
